<template>
	<view>
		<view style="text-align: center;font-size: 30rpx;padding: 20rpx;color: #FFFFFF;">登录</view>
		<view class="titleBox">
			<view style="display: flex;">
				<view style="width: 23%;margin-left: 5rpx;">
				<!-- 	<image src="../../static/icon/logo.png" style="width: 150rpx;height: 150rpx;border-radius: 50%;">
					</image> -->
				</view>
				<view style="margin-top: 5%;">
					<view class="title">欢迎您使用习水麻羊养殖管理移动端！</view>
					<view class="title">绿色农业领先的供应链服务平台</view>
				</view>
			</view>
		</view>
		<view class="inputBox">
			<view class="input_border">
				<view style="display: flex;">
					<uni-easyinput :styles="styles" :placeholderStyle="placeholderStyle" v-model="email" focus
						placeholder="请输入手机号:"></uni-easyinput>
					<view v-if="codeStatus" @click="setCountDown"
						style="padding: 20rpx;font-size: 30rpx;color: #ffffff;letter-spacing: 3rpx;font-weight: bold;">
						发送验证码</view>
					<view v-else
						style="padding: 20rpx;font-size: 28rpx;color: #ffffff;letter-spacing: 3rpx;font-weight: bold;">
						{{count}}</view>
				</view>
			</view>
			<view class="input_border">
				<uni-easyinput :styles="styles" :placeholderStyle="placeholderStyle" v-model="password"
					placeholder="请输入验证码:"></uni-easyinput>
			</view>
			<evan-checkbox-group style="display: flex;margin-top: 50rpx;">
				<evan-checkbox v-model="check" key="1" label="1"></evan-checkbox>
				<view style="margin-left: 10rpx;color: #FFFFFF;display: flex;">已阅读并同意 <view @click="ysxy">《隐私协议》</view>和
					<view @click="fwxy">《用户服务协议》</view>
				</view>
			</evan-checkbox-group>
			<view class="register" @click="register">注册</view>
		</view>
		<view class="buttonBox">
			<button class="button_fix" @click="onSubmit" size="default">登录</button>
			<!-- <button class="button_fix" style="margin-top: 20rpx;" @click="wx" size="default">微信登录</button> -->
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="1000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeholderStyle: "font-size:28rpx;color:#FFFFFF",
				styles: {
					color: '#FFFFFF',
					borderColor: 'transparent',
					backgroundColor: '#f5f5f5',
					size: '30rpx'
				},
				type: 2000,
				code: '',
				email: '',
				password: '',
				//验证码
				captcha: '',
				img: '',
				uuid: '',
				codeText: '获取验证码',
				//验证码已发
				readonly: false,
				isIos: true,
				token: '',
				windowHeight: 0,
				windowWidth: 0,
				msgType: 'success',
				messageText: '这是一条成功提示',
				check: false,
				codeStatus: true,
				timer: null,
				count: 60,
			};
		},
		//第一次加载
		onLoad() {

		},
		//页面显示
		onShow() {
			// this.captchaImage();
			if (uni.getStorageSync('token')) {
				uni.switchTab({
					url: '/pages/home/homePage'
				});
			} else {
				return;
			}
		},
		//登录页面阻止默认返回
		// onBackPress() {
		// 	uni.showModal({
		// 		title: '提示',
		// 		content: '是否退出系统？',
		// 		success: function(res) {
		// 			if (res.confirm) {
		// 				// 退出当前应用，改方法只在App中生效  
		// 				plus.runtime.quit();
		// 			}
		// 		}
		// 	});
		// 	return true;
		// },
		//方法
		methods: {
			setCountDown(){
				if(this.email != '' && this.email.length == 11){
					this.getSmsCode();
					this.codeStatus = !this.codeStatus
					this.timer = setInterval(()=>{
						if(this.count > 0){
							this.count--;
							console.log(this.count)
						}
						else{
							this.codeStatus = !this.codeStatus
							clearInterval(this.timer);
						}
					},1000)
				}
				else{
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'error'
					})
				}
				
			},
			getSmsCode(){
				let opt = {
					url:'getSmsCode/'+this.email,
					method:'GET'
				};
				this.$http.httpRequest(opt,{}).then(res =>{
					if(res.data.code == 200){
						uni.showToast({
							title: res.data.msg,
							icon: 'success'
						})
					}
					else{
						uni.showToast({
							title: res.data.msg,
							icon: 'error'
						})
					}
				})
			},
			ysxy() {
				uni.navigateTo({
					url: '/pages/login/ysxy'
				})
			},
			fwxy() {
				uni.navigateTo({
					url: '/pages/login/fwxy'
				})
			},
			// nb(){
			// 	this.$wx.config({
			// 		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,线上环境需要改为false
			// 		appId: '1', // 必填，公众号的唯一标识
			// 		timestamp: '1', // 必填，生成签名的时间戳
			// 		nonceStr: '1', // 必填，生成签名的随机串
			// 		signature: '1', // 必填，签名
			// 		jsApiList: ['chooseWXPay'], // 必填，需要使用的JS接口列表	
			// 	});
			// 	this.messageToggle('success', 'nb')
			// },
			wxAuth() {
				const redirectUri = encodeURIComponent(
					'https://www.jiulianrong.com/client-h5/#/pages/login/callback'); // 替换为你的回调地址
				const state = 'uniapp'; // 自定义的状态参数，可根据实际需求修改
				const url =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9c9216e6efe2ccf2&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`;
				window.location = url;
			},
			input(e) {
				console.log('输入内容：', e);
			},
			register() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			messageToggle(type, msg) {
				this.msgType = type
				this.messageText = msg
				this.$refs.message.open();
			},
			// captchaImage() {
			// 	var that = this;
			// 	let opts = {
			// 		url: 'captchaImage',
			// 		method: 'GET'
			// 	};
			// 	this.$http.httpRequest(opts).then(res => {
			// 		if (res.data.code = 200) {
			// 			that.img = 'data:image/gif;base64,' + res.data.data.img
			// 			that.uuid = res.data.data.uuid
			// 		} else {
			// 			uni.showToast({
			// 				title: '获取验证码失败',
			// 				icon: 'none',
			// 				position: 'center'
			// 			});
			// 		}
			// 	});
			// },
			onSubmit() {
				if (this.check) {
					// if (!this.email) {
					// 	this.messageToggle('error', '请输入账号')
					// 	return;
					// }
					// if (!this.password) {
					// 	this.messageToggle('error', '请输入验证码')
					// 	return;
					// }
					uni.showLoading({
						mask: true,
						title: "加载中..."
					})
					let opts = {
						// url: 'smsLogin',
						url: 'login',
						method: 'POST'
					};
					let param = {
						// phone: this.email,
						// smsCode: this.password
						userName: this.email,
						password: this.password,
						loginType: 'APP'
					};
					this.$http.httpRequest(opts, param).then(res => {
						console.log(res.data)
						if (res.data.code == 200) {
							uni.setStorageSync('token', res.data.data);
							uni.hideLoading();
							uni.showToast({
								title: '登陆成功',
								icon: 'success',
								duration: 1500
							});
							console.log('登录成功！')
							let opts = {
								url: 'getLoginUser',
								method: 'GET'
							};
							this.$http.httpTokenRequest(opts).then(res => {
								uni.setStorageSync('userInfo', res.data.data.user); //用户信息
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/control-tower/control-tower'
									});
								}, 2000);
								
								console.log("############" + '登录成功！')
								// this.wxAuth();
								// if(res.data.data.user.userType == 'admin' || res.data.data.user.userType == 'pick'){

								// }
								// else{

								// }
							})


						} else {
							uni.hideLoading();
							this.messageToggle('error', res.data.msg)
							return;
						}
					})
				} else {
					this.messageToggle('error', '请勾选隐私协议及用户服务协议')
				}
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background: linear-gradient(to right, #00c6fb 0%, #005bea 100%);
		/* background: url(../../static/img/backgroundImg.png)	no-repeat center center fixed; */
		background-size: cover;
		box-sizing: border-box;
	}

	.titleBox {
		width: 95%;
		margin: 0 auto;
		margin-top: 25%;
		/* text-align: center; */
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
		padding-top: 10rpx;
		color: #F1F1F1;
		letter-spacing: 5rpx;
	}

	.inputBox {
		width: 85%;
		margin: 0 auto;
		margin-top: 25%;

	}

	.input_border {
		width: 100%;
		border-bottom: 2px solid #007AFF;
		margin-top: 30rpx;
	}

	.register {
		float: right;
		color: #F1F1F1;
		font-size: 30rpx;
		margin-top: 20rpx;
		font-weight: bold;
		letter-spacing: 5rpx;
	}

	.buttonBox {
		margin: 0 auto;
		margin-top: 30%;
	}

	.button_fix {
		width: 85%;
		height: 80rpx;
		margin: 0 auto;
		border-radius: 25px;
		color: #2749C8;
		background: #FFFFFF;
		font-weight: bold;
		letter-spacing: 5rpx;
		opacity: 0.9;
		font-size: 30rpx;
		line-height: 80rpx;
	}
</style>